<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞书文档提取API - 测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .content {
            padding: 40px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            font-size: 1.1em;
        }

        input[type="url"] {
            width: 100%;
            padding: 15px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input[type="url"]:focus {
            outline: none;
            border-color: #4facfe;
            box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
        }

        .button-group {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
        }

        button {
            flex: 1;
            padding: 15px 25px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
        }

        .btn-secondary {
            background: #f8f9fa;
            color: #6c757d;
            border: 2px solid #e9ecef;
        }

        .btn-secondary:hover {
            background: #e9ecef;
            color: #495057;
        }

        .btn-primary:disabled,
        .btn-secondary:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .result-section {
            margin-top: 30px;
        }

        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .result-type {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .type-feishu {
            background: #e3f2fd;
            color: #1976d2;
        }

        .type-webpage {
            background: #f3e5f5;
            color: #7b1fa2;
        }

        .type-error {
            background: #ffebee;
            color: #d32f2f;
        }

        .result-content {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            max-height: 400px;
            overflow-y: auto;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 14px;
            line-height: 1.5;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            color: #6c757d;
        }

        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #e9ecef;
            border-top: 2px solid #4facfe;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .examples {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .examples h3 {
            margin-bottom: 15px;
            color: #495057;
        }

        .example-url {
            display: block;
            color: #4facfe;
            text-decoration: none;
            padding: 8px 0;
            border-bottom: 1px solid #e9ecef;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .example-url:hover {
            color: #0056b3;
        }

        .example-url:last-child {
            border-bottom: none;
        }

        .stats {
            display: flex;
            justify-content: space-around;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 2em;
            font-weight: 600;
            color: #4facfe;
        }

        .stat-label {
            color: #6c757d;
            font-size: 0.9em;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 飞书文档提取API</h1>
            <p>智能识别飞书文档并转换为Markdown，或获取网页源码</p>
        </div>
        
        <div class="content">
            <form id="extractForm">
                <div class="form-group">
                    <label for="urlInput">请输入URL地址：</label>
                    <input 
                        type="url" 
                        id="urlInput" 
                        placeholder="https://example.feishu.cn/docs/... 或 https://example.com"
                        required
                    >
                </div>
                
                <div class="button-group">
                    <button type="submit" class="btn-primary" id="extractBtn">
                        🔍 提取内容
                    </button>
                    <button type="button" class="btn-secondary" id="clearBtn">
                        🗑️ 清空结果
                    </button>
                </div>
            </form>
            
            <div class="examples">
                <h3>📝 示例URL：</h3>
                <a href="#" class="example-url" data-url="https://bytedance.feishu.cn/docs/doccnAbCdEfGhIjKlMnOpQrStUvWxYz">
                    飞书文档示例 (需要有效的文档ID)
                </a>
                <a href="#" class="example-url" data-url="https://httpbin.org/html">
                    普通网页示例
                </a>
                <a href="#" class="example-url" data-url="https://jsonplaceholder.typicode.com/posts/1">
                    JSON API示例
                </a>
            </div>
            
            <div id="resultSection" class="result-section" style="display: none;">
                <div class="result-header">
                    <h3>📄 提取结果</h3>
                    <span id="resultType" class="result-type"></span>
                </div>
                <div id="resultContent" class="result-content"></div>
            </div>
            
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-value" id="totalRequests">0</div>
                    <div class="stat-label">总请求数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="successRequests">0</div>
                    <div class="stat-label">成功请求</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="avgResponseTime">0ms</div>
                    <div class="stat-label">平均响应时间</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        class APITester {
            constructor() {
                this.baseURL = window.location.origin;
                this.stats = {
                    total: 0,
                    success: 0,
                    responseTimes: []
                };
                this.initEventListeners();
                this.loadStats();
            }

            initEventListeners() {
                const form = document.getElementById('extractForm');
                const clearBtn = document.getElementById('clearBtn');
                const exampleUrls = document.querySelectorAll('.example-url');

                form.addEventListener('submit', (e) => this.handleSubmit(e));
                clearBtn.addEventListener('click', () => this.clearResult());
                
                exampleUrls.forEach(link => {
                    link.addEventListener('click', (e) => {
                        e.preventDefault();
                        document.getElementById('urlInput').value = link.dataset.url;
                    });
                });
            }

            async handleSubmit(e) {
                e.preventDefault();
                
                const urlInput = document.getElementById('urlInput');
                const extractBtn = document.getElementById('extractBtn');
                const url = urlInput.value.trim();

                if (!url) {
                    alert('请输入有效的URL地址');
                    return;
                }

                this.showLoading();
                extractBtn.disabled = true;
                extractBtn.textContent = '⏳ 处理中...';

                const startTime = Date.now();
                
                try {
                    const response = await fetch(`${this.baseURL}/extract`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ url })
                    });

                    const responseTime = Date.now() - startTime;
                    this.updateStats(true, responseTime);

                    const data = await response.json();
                    
                    if (data.success) {
                        this.showResult(data, responseTime);
                    } else {
                        this.showError(data.error || '未知错误');
                    }
                } catch (error) {
                    const responseTime = Date.now() - startTime;
                    this.updateStats(false, responseTime);
                    this.showError(`网络错误: ${error.message}`);
                } finally {
                    extractBtn.disabled = false;
                    extractBtn.textContent = '🔍 提取内容';
                }
            }

            showLoading() {
                const resultSection = document.getElementById('resultSection');
                const resultContent = document.getElementById('resultContent');
                
                resultSection.style.display = 'block';
                resultContent.innerHTML = `
                    <div class="loading">
                        <div class="spinner"></div>
                        正在处理请求，请稍候...
                    </div>
                `;
            }

            showResult(data, responseTime) {
                const resultSection = document.getElementById('resultSection');
                const resultType = document.getElementById('resultType');
                const resultContent = document.getElementById('resultContent');
                
                resultSection.style.display = 'block';
                
                // 设置类型标签
                if (data.type === 'feishu_markdown') {
                    resultType.textContent = 'Feishu Markdown';
                    resultType.className = 'result-type type-feishu';
                } else if (data.type === 'webpage_html') {
                    resultType.textContent = 'Webpage HTML';
                    resultType.className = 'result-type type-webpage';
                }
                
                // 显示内容
                const content = data.content || '';
                const preview = content.length > 5000 ? 
                    content.substring(0, 5000) + '\n\n... (内容已截断，共 ' + content.length + ' 字符)' : 
                    content;
                
                resultContent.textContent = `响应时间: ${responseTime}ms\n原始URL: ${data.url}\n内容类型: ${data.type}\n内容长度: ${content.length} 字符\n\n--- 内容预览 ---\n${preview}`;
            }

            showError(error) {
                const resultSection = document.getElementById('resultSection');
                const resultType = document.getElementById('resultType');
                const resultContent = document.getElementById('resultContent');
                
                resultSection.style.display = 'block';
                resultType.textContent = 'Error';
                resultType.className = 'result-type type-error';
                resultContent.textContent = `❌ 错误: ${error}`;
            }

            clearResult() {
                const resultSection = document.getElementById('resultSection');
                const urlInput = document.getElementById('urlInput');
                
                resultSection.style.display = 'none';
                urlInput.value = '';
                urlInput.focus();
            }

            updateStats(success, responseTime) {
                this.stats.total++;
                if (success) this.stats.success++;
                this.stats.responseTimes.push(responseTime);
                
                // 只保留最近100次请求的响应时间
                if (this.stats.responseTimes.length > 100) {
                    this.stats.responseTimes.shift();
                }
                
                this.displayStats();
                this.saveStats();
            }

            displayStats() {
                document.getElementById('totalRequests').textContent = this.stats.total;
                document.getElementById('successRequests').textContent = this.stats.success;
                
                const avgTime = this.stats.responseTimes.length > 0 ? 
                    Math.round(this.stats.responseTimes.reduce((a, b) => a + b, 0) / this.stats.responseTimes.length) : 0;
                document.getElementById('avgResponseTime').textContent = avgTime + 'ms';
            }

            saveStats() {
                localStorage.setItem('apiTesterStats', JSON.stringify(this.stats));
            }

            loadStats() {
                const saved = localStorage.getItem('apiTesterStats');
                if (saved) {
                    this.stats = { ...this.stats, ...JSON.parse(saved) };
                    this.displayStats();
                }
            }
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            new APITester();
        });
    </script>
</body>
</html>